<template>
	<view>
		<form>
			<view class="cu-card case">
				<!-- 上部分 -->
			    <view class="cu-item shadow bg-white">
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class="action">
							<text class="cuIcon-title text-orange "></text>
							作品上传
						</view>
						<view class="action"><button class="cu-btn bg-green shadow" @tap="clickClock">参加</button></view>
					</view>
	        <view class="cu-form-group align-start">
						<textarea maxlength="-1" :value="textValue2" @input="contentChange2" placeholder="标题"></textarea>
					</view>

					<view class="cu-form-group align-start">
						<textarea maxlength="-1" :value="textValue" @input="contentChange" placeholder="内容"></textarea>
					</view>
			    </view>
			<!-- 上部分 -->
			<!-- 下部分 -->
			<view class="cu-item shadow bg-white">
				<view class="cu-bar bg-white margin-top">
					<view class="action">图片上传</view>
					<view class="action">{{ imgList.length }}/1</view>
				</view>
				<view class="cu-form-group" style="margin-bottom: 20px;">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length < 1"><text class="cuIcon-cameraadd"></text></view>
					</view>
				</view>
			</view>
			<!-- 下部分 -->
			</view>	
		</form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgList: [],
			textValue: null,
			textValue2: null,
			modalName: null,
			percent:0,
			newImgUrl:null,
			id: 0
		};
	},
	onLoad(option){
		this.id = option.id;
	},
	methods: {
		clickClock() {
      var userID = uni.getStorageSync("user").id;
      /*console.log(this.textValue);
                console.log(this.imgList[0]);
                console.log(userID);*/
      if (this.imgList[0] != null && this.textValue != null) {
        this.request({
          url: this.apiServer + "/task/addActivitiesTask",
          method: "POST",
          data: {
            uId: userID,
            title: this.textValue,
            imgUrl: this.imgList[0],
            desc:this.textValue2,
            pId: this.id
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }).then(res => {
          console.log(res.data);
          this.textValue = null;
          this.imgList = [];
          if (res.code == "500") {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          } else {
            // uni.navigateBack({
            //   delta: 1,
            //   animationType: "pop-out",
            //   animationDuration: 1000
            // });
            uni.navigateTo({
                url:"/pagesB/activitiesDetail/index?id="+this.id
            })
            uni.showToast({
              title: res.msg,
              duration:2000
            });
          }
        });
      } else {
        uni.showToast({
          title: "参加失败",
          image: "/static/icon/error.png"
        });
      }
    },

		ChooseImage() {
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					// if (this.imgList.length != 0) {
					// 	this.imgList = this.imgList.concat(res.tempFilePaths);
					// } else {
					this.imgList = res.tempFilePaths;
					//因为有一张图片， 输出下标[0]， 直接输出地址
					var imgFiles = res.tempFilePaths[0];
					//console.log(imgFiles);
					// 上传图片
					// 做成一个上传对象
					uni.uploadFile({
						// 需要上传的地址
						url: this.apiServer + '/upload/fileUpload',
						// filePath  需要上传的文件
						filePath: imgFiles,
						name: 'file',
					}).then(uploadFileRes=>{
						console.log(uploadFileRes[1]);
						this.newImgUrl=uploadFileRes[1].data;
						console.log(this.newImgUrl);
					});

					// }
				}
			});
		},
		ViewImage(e) {
			console.log(this.imgList);
			uni.previewImage({
				urls: this.imgList
				//current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			this.imgList.splice(e.currentTarget.dataset.index, 1);
			this.newImgUrl=null;
		},
		contentChange: function(e) {
			this.textValue = e.detail.value;
    },
    	contentChange2: function(e) {
			this.textValue2 = e.detail.value;
		}
	}
};
</script>

<style>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}
</style>
